<template>
  <div>
    <div class="billList page_box">
      <window-title title="总体概况"></window-title>
      <div class="cardData">
        <div class="cardData_card" v-for="(item, index) in cardData" :key="index">
          <i class="iconfont" v-html="item.icon"></i>
          <div class="title">总费用</div>
          <div class="cardData_card_bottom">2000</div>
        </div>
      </div>
    </div>
    <div class="page_box two">
      <el-form :model="form" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="开始时间：">
              <!-- <el-input size="mini"></el-input> -->
              <el-date-picker
                v-model="form.beganTime"
                size="mini"
                type="datetime"
                placeholder="选择日期时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结束时间：">
              <!-- <el-input size="mini"></el-input> -->
              <el-date-picker
                v-model="form.endTime"
                size="mini"
                type="datetime"
                placeholder="选择日期时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="交易号：">
              <el-input v-model="form.dealNum" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类型：">
              <el-select size="mini" v-model="form.type" placeholder="请选择">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="15px">
              <el-button class="search_btn" size="mini" icon="el-icon-search">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格 -->
      <el-tabs v-model="activeName" style="margin-top:20px">
        <el-tab-pane label="全部" name="1">
          <span slot="label"> 全部
               <span class="tab-badge">{{all}}</span>
             </span>
        </el-tab-pane>
        <el-tab-pane label="收入" name="2">
          <span slot="label"> 收入
               <span class="tab-badge">{{income}}</span>
             </span>
        </el-tab-pane>
        <el-tab-pane label="支出" name="3">
          <span slot="label"> 支出
               <span class="tab-badge">{{expend}}</span>
             </span>
        </el-tab-pane>
      </el-tabs>
      <el-table  :header-cell-style="{background:'#f8f8f8',color:'#333',borderRight:0}" border size="mini" :data="tableData" style="width: 100%">
        <el-table-column label="序号" width="60" type="index"></el-table-column>

        <el-table-column label="交易号" width="150" prop="dealNum"></el-table-column>
        <el-table-column label="对象" width="150" prop="object"></el-table-column>
        <el-table-column label="消费类型" width="100" prop="type"></el-table-column>
        <el-table-column label="费用金额" width="100" prop="cost"></el-table-column>
        <el-table-column label="内容" width="200" prop="content">
          <template slot-scope="scope">
            <el-popover placement="top-start" width="200" :content="scope.row.content" trigger="hover">
              <div class="popoverTip" slot="reference">{{scope.row.content}}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="消费时间" width="150" prop="time"></el-table-column>
        <el-table-column label="备注" width="200" prop="remark">
          <template slot-scope="scope">
            <el-popover placement="top-start" width="200" trigger="hover">
              <div class="popoverTip" slot="reference">{{scope.row.remark}}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="100">
          <template>
            <el-button size="mini" icon="el-icon-document" @click="showRemark">备注</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-box">
          <el-pagination
            background
            small
            :current-page="current_page"
            :page-size="per_page"
            layout="total, prev, pager, next, jumper"
            :total="30"
          ></el-pagination>
        </div>
    </div>
    <el-dialog title="填写备注" :visible.sync="remarkDialog" width="30%">
      <el-input type="textarea"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini">取 消</el-button>
        <el-button class="submitBtn" size="mini">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import windowTitle from "../../components/unit/title";
export default {
  components: { windowTitle },
  data() {
    return {
      all:10,
      income:4,
      expend:4,
      current_page: 1,
      per_page:10,
      pageSizes: [10, 20, 30, 50],
      remarkDialog: false,
      headerList: [
        { label: "交易号", prop: "dealNum" },
        { label: "对象", prop: "object" },
        { label: "消费类型", prop: "type" },
        { label: "费用金额", prop: "cost" },
        { label: "内容", prop: "content" },
        { label: "消费时间", prop: "time" },
        { label: "备注", prop: "remark" }
      ],
      tableData: [
        {
          dealNum: "1584348085522",
          object: "sdf",
          type: "体现支出",
          cost: "2000元",
          content: "中国农业银行献县支行，杨立杰，622848 1755654 448",
          time: "2020-03-16 16:41:26",
          remark: ""
        }
      ],
      activeName: "1",
      form: {
        beganTime: "",
        endTime: "",
        dealNum: "",
        type: "全部"
      },
      typeOptions: [
        { label: "全部", value: "全部" },
        { label: "会费收入", value: "会费收入" },
        { label: "活动收入", value: "活动收入" },
        { label: "认证收入", value: "认证收入" },
        { label: "提现支出", value: "提现支出" },
        { label: "活动退费", value: "活动退费" }
      ],
      cardData: [
        { icon: "&#xe60f;", title: "总金额", price: "100.00" },
        { icon: "&#xe62a;", title: "会费费用", price: "900.00" },
        { icon: "&#xe73a;", title: "活动费用", price: "1000.00" },
        { icon: "&#xe607;", title: "已提现", price: "1400.00" },
        { icon: "&#xe616;", title: "提现中", price: "88.00" },
        { icon: "&#xe84e;", title: "余额", price: "1040.00" }
      ]
    };
  },
  methods: {
    showRemark() {
      this.remarkDialog = true;
    },
    handleSizeChange(e) {
      console.log(e);
    },
    handleCurrentChange(e) {
      console.log(e);
    }
  }
};
</script>

<style scoped>
@import url("../../assets/css/finance/billList.css");
</style>